@define BACKGROUND_COLOR: #000000;
@define BACKGROUND_COLOR_WHITE: #FFFFFF28;

.FlyoutScoreboardRoot
{
	horizontal-align: left;
	vertical-align: top;
	margin-top: 150px;
    flow-children: down;
    padding: 10px;
	
    transform: translatex( -600px );
    transition-property: transform;
    transition-duration: 0.1s;
}

.FlyoutScoreboardRoot.flyout_scoreboard_visible
{
    transform: translatey( 0px );
}

#TeamsContainer
{
    flow-children: down;
    horizontal-align: center;
}

.FlyoutTeam
{
	margin-top: 8px;
}

.FlyoutTeam.no_players
{
	visibility: collapse;
}

.local_player_team.FlyoutTeam
{
	z-index: 99;
}

.FlyoutTeamData
{
    flow-children: right;
}

.TeamInfo
{
	margin-top: 1px;
	height: 100%;
}

#TeamColor_GradentFromTransparentLeft
{
	width: 100%;
	height: 100%;
}

#TeamColorOverlay
{
	background-color: gradient( linear, 80% 0%, 100% 0%, from( #00000000 ), to( #000000FF ) );
	width: 100%;
	height: 100%;
}

.FlyoutPlayer
{ 
    flow-children: right;
}

.TeamCloseSpacer
{
}

#PlayersContainer
{
    flow-children: down;
}

.local_player_team #PlayersContainer
{
    box-shadow: fill #ffffff40 -3px -3px 3px 6px;
}

.TeamId
{
    flow-children: right;
}

#TeamLogo
{
	vertical-align: top;
	horizontal-align: right;
    height: 30px;
    width: 30px;
	margin-top: 2px;
	margin-right: 2px;
}

#TeamScore
{
	vertical-align: center;
	horizontal-align: center;
	color: #cccccc;
	font-size: 42px;
	text-shadow: 2px 2px 2px black;
	font-weight: bold;
	margin-top: -3px;
	text-overflow: clip;
}

.one_player #TeamScore
{
	font-size: 32px;
}


#TeamScorePanel
{
	margin-top: 1px;
	margin-left: 286px;
	width: 49px;
	height: 100%;
    background-color: BACKGROUND_COLOR;
}

.Legend
{
	flow-children: right;
}

.Legend Label
{
	text-shadow: 2px 2px 2px black;
	text-transform: uppercase;
	font-size: 12px;
	color: #90999b;
}

.PlayerRow
{
	height: 32px;
}

#PlayerRowContainer
{
	flow-children: right;
	height: 32px;
}

#HeroIcon
{
    vertical-align: middle;
	border: 1px solid black;
}

#LevelContainer,
#KillsContainer,
#DeathsContainer,
#AssistsContainer
{
	height: 100%;
}

.ScoreboardPanel
{
    background-color: BACKGROUND_COLOR;
	margin-top: 1px;
	margin-left: 1px;
}

.LegendPanel
{
	margin-top: 1px;
	margin-left: 1px;
}

.is_local_player .ScoreboardPanel
{
//    background-color: BACKGROUND_COLOR_WHITE;
}

.ScoreboardPanel Label
{
	font-size: 30px;
	text-shadow: 2px 2px 2px black;
}

.UltimateIndicatorShared
{
	margin-left: 44px;
	margin-top: 2px;
	vertical-align: center;
	width: 20px;
	height: 20px;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#Level
{
	vertical-align: center;
	horizontal-align: center;
	color: #898b8c;
}

#Kills,
#Deaths,
#Assists
{
	vertical-align: center;
	font-size: 18px;
	text-align: center;
	margin-top: 3px;
	width: 100%;
}

#PlayerName
{
	color: white;
	font-size: 14px;
	margin-bottom: -4px;
	margin-top: 0px;
	white-space: nowrap;
}

#HeroNameAndDescription
{
	color: #898b8c;
	font-size: 13px;
	text-shadow: 2px 2px 2px black;
	margin-top: -1px;
}
#MuteButton
{
	margin-right: 0px;
	margin-top: 0px;
	horizontal-align: right;
	vertical-align: top;
	width: 18px;
	height: 18px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: url( "file://{images}/custom_game/button_audio_on.psd" );
	opacity: 0.8;
}

.is_local_player #MuteButton
{
	visibility: collapse;
}

#MuteButton:hover
{
	opacity: 1;
}

.player_muted #MuteButton
{
    background-image: url( "file://{images}/custom_game/button_audio_off.psd" );
}

#TeammateGoldAmount
{
	margin-right: -1px;
	margin-bottom: -2px;
	vertical-align: bottom;
	horizontal-align: right;
	color: #ffd300;
	font-size: 13px;
	text-shadow: 2px 2px 2px black;
	visibility: collapse;
}

.local_player_team #TeammateGoldAmount
{
	visibility: visible;
}

#PlayerDetailsContainer
{
	height: 100%;
}

#PlayerAndHeroName
{
	flow-children: down;
	padding-left: 8px;
}

.is_local_player #Kills,
.is_local_player #Deaths,
.is_local_player #Assists,
.is_local_player #Level,
.is_local_player #HeroName
{
	color: white;
}

.ScoreCol_TeamInfo
{
	width: 60px;
}

.ScoreCol_PlayerDetails
{
	width: 170px;
}

.ScoreCol_Hero
{
	width: 53px;
}

.ScoreCol_TeamScore
{
	width: 50px;
	text-align: center;
}

.ScoreCol_Kills,
.ScoreCol_Deaths,
.ScoreCol_Assists
{
	width: 50px;
	text-align: center;
}

